{% extends "base.html" %}
{% block content %}
    <div class="container">
        <h1 class="mb-4">用户管理</h1>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>部门</th>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr>
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.department }}</td>
                        <td>
                            {% if user.role == 'admin' %}
                                <span class="badge bg-primary">管理员</span>
                            {% else %}
                                <span class="badge bg-secondary">普通用户</span>
                            {% endif %}
                        </td>
                        <td>
                            <button type="button"
                                    class="btn btn-primary btn-sm"
                                    data-toggle="modal"
                                    data-target="#editModal"
                                    data-user-id="{{ user.id }}"
                                    data-username="{{ user.username }}"
                                    data-email="{{ user.email }}"
                                    data-name="{{ user.name }}"
                                    data-department="{{ user.department }}"
                                    data-role="{{ user.role }}"
                                    data-engineer-id="{{ user.engineer_id }}"
                                    title="编辑用户">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <form method="POST"
                                  action="{% url 'user_management' %}"
                                  style="display: inline;"
                                  onsubmit="return confirm('确定要删除该用户吗？此操作不可恢复！')">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="delete">
                                <input type="hidden" name="user_id" value="{{ user.id }}">
                                <button type="submit"
                                        class="btn btn-danger btn-sm"
                                        title="删除用户">
                                    删除
                                </button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#addModal">添加用户</button>
    </div>

    <!-- 添加用户的模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">添加用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'user_management' %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="engineer_id">工程师ID</label>
                            <input type="text" class="form-control" id="engineer_id" name="engineer_id" required>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="department">部门</label>
                            <select class="form-control" id="department" name="department" required>
                                {% for dept in departments %}
                                    <option value="{{ dept.0 }}">{{ dept.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="role">角色</label>
                            <select class="form-control" id="role" name="role" required>
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑用户的模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">编辑用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{% url 'user_management' %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="edit">
                        <input type="hidden" name="user_id" id="edit_user_id">
                        <div class="form-group">
                            <label for="edit_username">用户名</label>
                            <input type="text" class="form-control" id="edit_username" name="username" readonly>
                        </div>
                        <div class="form-group">
                            <label for="edit_email">邮箱</label>
                            <input type="email" class="form-control" id="edit_email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="edit_name">姓名</label>
                            <input type="text" class="form-control" id="edit_name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="edit_department">部门</label>
                            <select class="form-control" id="edit_department" name="department" required>
                                {% for dept in departments %}
                                    <option value="{{ dept.0 }}">{{ dept.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="edit_role">角色</label>
                            <select class="form-control" id="edit_role" name="role" required>
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                        <!-- 在编辑模态框的表单中添加engineer_id字段 -->
                        <div class="form-group">
                            <label for="edit_engineer_id">工程师ID</label>
                            <input type="text" class="form-control" id="edit_engineer_id" name="engineer_id" required>
                        </div>
                        <div class="form-group">
                            <label for="edit_password">密码</label>
                            <input type="password" class="form-control" id="edit_password" name="password">
                            <small class="form-text text-muted">留空则不修改密码</small>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        // 当编辑模态框显示时，填充用户信息
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var userId = button.data('user-id');
            var username = button.data('username');
            var email = button.data('email');  // 获取email
            var name = button.data('name');    // 获取name
            var department = button.data('department');
            var role = button.data('role');
            var engineerId = button.data('engineer-id');
            var modal = $(this);
            modal.find('#edit_user_id').val(userId);
            modal.find('#edit_username').val(username);
            modal.find('#edit_email').val(email);  // 设置email
            modal.find('#edit_name').val(name);    // 设置name
            modal.find('#edit_department').val(department);
            modal.find('#edit_role').val(role);
            modal.find('#edit_engineer_id').val(engineerId);
            // 密码字段不设置值，保持为空
        });
    </script>
{% endblock %}